<template>
  <div class="box">
    <div>
      <svg 
        :viewBox="`0 0 ${totalLength} 100`" 
        width="100%" 
        height="150">
        <!-- 绘制矩形 -->
        <rect 
          width="100%" 
          height="150" 
          y="25" 
          fill="#f0f0f0"/>

        <!-- 根据shapes数组动态绘制圆形，并绑定点击事件 -->
        <circle 
          v-for="(shape, index) in circle" 
          :key="index"
          :cx="shape.pos" 
          cy="50" 
          r="5" 
          fill="blue"
          style="cursor: pointer;"
          @click="handleShapeClick(shape)" />
        <rect 
          v-for="(shape, index) in rectangles" 
          :key="`rectangle-${index}`"
          :x="shape.pos - 10" 
          :y="40" 
          width="10" 
          height="10" 
          fill="green"
          style="cursor: pointer;"
          @click="handleShapeClick(shape)" />
        <!-- 使用计算属性来渲染菱形 -->
        <polygon 
          v-for="(shape, index) in diamonds" 
          :key="`diamond-${index}`"
          :points="`${shape.pos},50 ${shape.pos - 10},60 ${shape.pos - 10},40 ${shape.pos},50`" 
          fill="red"
          style="cursor: pointer;"
          @click="handleShapeClick(shape)" />

        <!-- 使用计算属性来渲染五角星 -->
        <polygon 
          v-for="(shape, index) in stars" 
          :key="`star-${index}`"
          :points="`${shape.pos},50 ${shape.pos + 5},40 ${shape.pos + 10},50 ${shape.pos + 5},60 ${shape.pos},55`" 
          fill="yellow"
          style="cursor: pointer;"
          @click="handleShapeClick(shape)" />
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  layout: 'staticPage',
  data() {
    return {
      shapes: [
        { id: 1, pos: 112, type: 'circle', name: 'Circle One' },
        { id: 1, pos: 800, type: 'star', name: 'Circle One' },
        { id: 1, pos: 620, type: 'diamond', name: 'Circle One' },
        { id: 1, pos: 500, type: 'rectangle', name: 'Circle One' }
        // 可以添加更多形状
      ],
      totalLength: 1500
    }
  },
  computed: {
    rectangles() {
      return this.shapes.filter(shape => shape.type === 'rectangle')
    },
    diamonds() {
      return this.shapes.filter(shape => shape.type === 'diamond')
    },
    stars() {
      return this.shapes.filter(shape => shape.type === 'star')
    },
    circle() {
      return this.shapes.filter(shape => shape.type === 'circle')
    }
  },
  mounted() {},
  methods: {
    handleShapeClick(shape) {
      console.log(shape)
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100vh;
  background: #001f6b;
  color: #ffffff;
  padding: 30px 20px;
  overflow: hidden;
}
</style>
